<div #contactGroup class="po-page-blocked-user-contact-group po-row po-mb-3">
  <div
    class="po-page-blocked-user-contact-item"
    [class.po-invisible]="!phone"
    [ngClass]="overflowItem ? 'po-md-12' : 'po-md-6'"
  >
    <a
      class="po-page-blocked-user-link po-clickable"
      [class.po-page-blocked-user-contact-content-inline]="overflowItem"
      href="tel:{{ phone }}"
      target="_self"
    >
      <div class="po-page-blocked-user-contact-group-item">
        <po-icon class="po-page-blocked-user-contact-icon po-pr-1" p-icon="ICON_TELEPHONE"></po-icon>
        <div #phoneItem class="po-page-blocked-user-contact-text po-font-text">{{ phone }}</div>
      </div>
    </a>
  </div>
  <div
    class="po-page-blocked-user-contact-item po-page-blocked-user-contact-mail"
    [class.po-invisible]="!email"
    [ngClass]="overflowItem ? 'po-md-12' : 'po-md-6'"
  >
    <a
      class="po-page-blocked-user-link po-clickable"
      [class.po-page-blocked-user-contact-content-inline]="overflowItem"
      href="mailto:{{ email }}"
      target="_self"
    >
      <div class="po-page-blocked-user-contact-group-item">
        <po-icon class="po-page-blocked-user-contact-icon po-pr-1" p-icon="ICON_MAIL"></po-icon>
        <div #mailItem class="po-page-blocked-user-contact-text po-font-text">{{ email }}</div>
      </div>
    </a>
  </div>
</div>
